<template>
  <div class="playVideo">
    <video :src="videoUrl" autoplay ref="video" @click="showControls"></video>
    <div class="playControls" v-show="isShow">
      <i
        v-show="isPrev"
        class="iconfont icon-shangyiqu"
        @click.stop="goPrev"
      ></i>
      <i
        v-show="!isPlay"
        class="iconfont icon-bofang"
        @click.stop="playVideo(true)"
      ></i>
      <i
        v-show="isPlay"
        class="iconfont icon-24gf-pause2"
        @click.stop="playVideo(false)"
      ></i>
      <i v-show="isNext" class="iconfont icon-xiayiqu" @click.stop="goNext"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayVideo",
  props: {
    videoUrl: {
      type: String,
      default: "",
    },
    relationVideoLength: {
      type: Number,
      default: 0,
    },
    currentPlayIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      index: this.currentPlayIndex,
      isPrev: false,
      isNext: true,
      isPlay: true,
      isShow: false,
      timer: null,
    };
  },
  methods: {
    showControls() {
      this.isShow = !this.isShow;
      // 防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.isShow = !this.isShow;
      }, 3000);
    },
    playVideo(val) {
      this.isPlay = val;
      val ? this.$refs.video.play() : this.$refs.video.pause();
    },
    goPrev() {
      this.index--;
      this.$emit("getPrevVideo", this.index);
      if (this.index === 0) {
        this.isPrev = false;
      }
      this.isNext = true;
    },
    goNext() {
      this.index++;
      this.$emit("getNextVideo", this.index);
      if (this.index === this.relationVideoLength - 1) {
        this.isNext = false;
      }
      this.isPrev = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.playVideo {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  video {
    width: 100%;
  }
  .playControls {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3rem;
    margin-top: -1.5rem;
    line-height: 3rem;
    pointer-events: none;
    i.iconfont {
      position: absolute;
      z-index: 999;
      font-size: 2rem;
      color: #fff;
      cursor: pointer;
      pointer-events: auto;
    }
    i.icon-shangyiqu {
      left: 15%;
    }
    i.icon-bofang,
    i.icon-24gf-pause2 {
      font-size: 3rem;
      left: 50%;
      transform: translateX(-50%);
    }
    i.icon-xiayiqu {
      right: 15%;
    }
  }
}
</style>